<template>
  <div>你的ip:{{ ip }}</div>
  <div>
    {{ city.province }}
    {{ city }}
    {{ weather.weather }}
    {{ weather.temperature }}
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
const ip = ref('无法获取')
const city = ref({
  ip: '',
  lng: '',
  lat: '',
  nation: '',
  province: '',
  city: '',
  district: '',
  citycode: '',
})
const weather = ref({
  province: '',
  city: '',
  adcode: 0,
  weather: '',
  temperature: '',
  winddirection: '',
  windpower: '',
  humidity: '',
  reporttime: '',
  temperature_float: '',
  humidity_float: '',
})

onMounted(() => {
  getIp()
})

const getIp = () => {
  api.get('/tools/ip', {}, (data) => {
    if (!data.success) {
      ElMessage.error('获取ip失败')
      return
    }
    ip.value = data.data
    getCity()
  })
}

const getCity = () => {
  api.get('/tools/ipinfo', { ip: ip.value }, (data) => {
    if (!data.success) {
      city.value.province = '无法获取'
      return
    }
    city.value = data.data
  })
}

const getWeather = () => {
  api.get(
    '/tools/weather/live',
    {
      city: 430000, //city.value.citycode,
    },
    (data) => {
      if (!data.success) {
        weather.value = data.data
        getWeather()
      }
    },
  )
}
</script>

<style scoped></style>
